<template>
  <div>
    <cityheader></cityheader>
    <citysearch :city='cities'></citysearch>
    <citylist 
      :city='cities' 
      :hot='hotCities'
      :letter='letter'></citylist>
    <alphabet 
      :city='cities'
      @change='handelLetterChange'></alphabet>
  </div>
</template>

<script>
import axios from 'axios'
import cityheader from './components/header'
import citysearch from './components/search'
import citylist from './components/list'
import alphabet from './components/alphabet'
export default {
  name:'city',
  components:{
    cityheader,
    citysearch,
    citylist,
    alphabet
  },
  data(){
    return{
      cities:{},//页面刚加载时，cities为空对象，当ajax获取数据之后，cities发生变化，alphabet被渲染出来
      hotCities:[],
      letter:''
    }
  },
  methods:{
     getcityinfo(){
       axios.get('/api/city.json')
          .then(this.handelgetcityinfosucc)
     },
     handelgetcityinfosucc(res){
       res=res.data
       if(res.ret&&res.data){
         const data=res.data
         this.cities=data.cities
         this.hotCities=data.hotCities
       }
     },
     handelLetterChange(letter){
       this.letter=letter
     }
  },
  mounted(){
    this.getcityinfo()
  }
}
</script>

<style lang="stylus" scoped>

</style>
